<template>
  <el-row width="100%">
    <el-col :span="18" :offset="3">
      <div>
        <el-row>
          <el-col :span="4">
            <el-input  placeholder="请输入内容" v-model="input" clearable style="width: 200px"></el-input>
          </el-col>
          <el-col :span="1">
            <el-button icon="el-icon-search" circle></el-button>
          </el-col>
          <el-col :span="2" :offset="13">
            <el-button>导出</el-button>
          </el-col>
          <el-col :span="1">
            <el-button type="primary"><router-link to="/purchase/inc_purchase">新增</router-link></el-button>
          </el-col>
        </el-row>
        <div style="height: 20px"></div>
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 1200px">
          <el-table-column
            fixed
            prop="date"
            label="编码"
            width="150">
          </el-table-column>
          <el-table-column
            prop="name"
            label="供应商名称"
            width="120">
          </el-table-column>
          <el-table-column
            prop="province"
            label="联系人"
            width="120">
          </el-table-column>
          <el-table-column
            prop="city"
            label="联系电话"
            width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="所属区域"
            width="300">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="详细地址"
            width="120">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="状态"
            width="120">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="130">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="height: 20px"></div>
      <div class="block" style="height: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    </el-col>
  </el-row>

</template>

<script>
  export default {
    name: "Purchase",
    methods: {
      handleClick(row) {
        console.log(row);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },

    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        input: '',
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }]
      }
    }
  }
</script>

<style scoped>

</style>
